import React, {useState} from 'react'
// import axios from "utils/request";
import '../assest/style/common.css'
import './demand.scss'
import {NavBar, Toast, Button, Input} from 'antd-mobile'

function Demand() {
  // 返回事件
  const back = () => Toast.show({content: '点击了返回区域', duration: 1000})
  const [name,
    setName] = useState('老胡')
  const [phone,
    setPhone] = useState('138000000')

  return (
    <div className="home-demand root">
      {/* 头部标题 */}
      <div className="home-demand-top flex aic jc-sb w100pc" >
        <NavBar back="返回" onBack={back}>
          <div className="title">
            <img
              src="http://villa.huruqing.cn/static/media/logo.5a470abf0dc984ae9654.png"
              alt=""/>
              
          </div>
        </NavBar>
      </div>
      {/* 底图 */}
      <div className='under'>
        <img
          className="w100pc"
          src="http://villa.huruqing.cn/static/media/demand.ca439ba905680881277d.jpeg"
          alt=""/>
      </div>

      {/* 列表 */}
      <div className="form bg-fff">
        <ul className="demand-list f999 pl-10 pr-10 bg-fff">
          {/* 旅游类型 */}
          <li className="demand-item flex aic jb-sb">
            <span className="label">旅游类型</span>
            <div className="flex jb-sb fg1">
              <span className=" op active">家庭</span>
              <span className="ml-15 op">公司</span>
              <span className="ml-15 op">同学</span>
              <span className="ml-15 op">其他</span>
            </div>
          </li>
          {/* 出游人数 */}
          <li className="demand-item flex aic jb-sb">
            <span className="label">出游人数</span>
            <div className="flex jb-sb fg1">
              <span className="\ op active">1-5</span>
              <span className="ml-15 op">6-10</span>
              <span className="ml-15 op">10+</span>
            </div>
          </li>
          {/* 联系姓名 */}
          <li className="demand-item flex aic jb-sb">
            <span className="label">联系姓名</span>
            <span className='inp flex aic fg1'>
              <Input
                placeholder='请输入名字'
                value={name}
                onChange={val => {
                setName(val)
              }}/>
            </span>
          </li>
          {/* 电话 */}
          <li className="demand-item flex aic jb-sb">
            <span className="label">联系电话</span>
            <span className='inp flex aic fg1'>
              <Input
                placeholder='请输入电话'
                value={phone}
                onChange={val => {
                setPhone(val)
              }}/>
            </span>
          </li>
        </ul>
        <div className='mt-30 bottom pb-20'>
          <Button block color='warning' size='small'>
            <span className='text'>
              提交需求
            </span>
          </Button>
        </div>
      </div>
    </div>
  )
}

export default Demand
